<template>
	<view class="search-container">
		<view class="search-box">
			<input type="text" v-model="searchQuery" placeholder="搜索标题" @click="search" />
		</view>
		<view class="add-btn" @click="add">
			<text class="icon-add" style="position:relative;left: 12px;">创建家政员</text>
		</view>
		<view class="filter-container">
			<view class="filter" @click="bindFilterTap">
				<text :class="{ active: currentFilter === '全部' }" data-filter="全部">全部</text>
				<text :class="{ active: currentFilter === '使用中' }" data-filter="使用中">使用中</text>
				<text :class="{ active: currentFilter === '已停止' }" data-filter="已停止">已停止</text>
				<text :class="{ active: currentFilter === '已关闭' }" data-filter="已关闭">已关闭</text>
				<!-- <text :class="{ active: currentFilter === '首页推荐' }" data-filter="首页推荐">首页推荐</text>
          <text :class="{ active: currentFilter === '置顶' }" data-filter="置顶">置顶</text> -->
			</view>
		</view>
	</view>
	<view class="main-admin bg-admin">
		<view class="admin-comm-list">
			<view v-if="isAdmin && isLoad">
				<view class="load text-grey">共有{{ dataList.total }}条符合条件记录</view>

				<view class="item" v-for="(item, index) in dataList.list" :key="item._id">
					<view class="no">{{ index + 1 }}</view>
					<view class="header">
						<view class="left text-cut">{{ item.ADMIN_NAME }}</view>
						<view class="right">
							<image src="/static/扫码.png" mode="aspectFill" />
						</view>
					</view>

					<view class="info title-mid">
						<view class="info-item">
							<view class="title">状态</view>
							<view class="mao">：</view>
							<view class="content" v-if="item.ADMIN_STATE == 0" style="color: #3ac138;">使用中</view>
							<view class="content" v-if="item.ADMIN_STATE == 1" style="color: #d86f15;">已停止</view>
							<view class="content" v-if="item.ADMIN_STATE == 2" style="color: #d81515;">已关闭</view>
						</view>

						<view class="info-item">
							<view class="title">排期</view>
							<view class="mao">：</view>
							<view class="content">{{ item.ADMIN_SCHEDULE }}</view>
						</view>
						<view class="info-item">
							<view class="title">修改</view>
							<view class="mao">：</view>
							<view class="content">{{ item.ADMIN_LOGIN_TIME }}</view>
						</view>
						<view class="oprt">
							<view class="btn margin-right-s" @click="update">
								<text class="icon-edit margin-right-xxs"></text>设置
							</view>
							<view class="btn margin-right-s" @click="state = true">
								<text class="icon-edit margin-right-xxs"></text>名单与核销
							</view>
							<view class="btn margin-right-s" @click="showModal = true">
								<text class="icon-delete margin-right-xxs text-orange"></text>状态
							</view>
							<view class="btn margin-right-s" @click="more = true">
								<text class="icon-delete margin-right-xxs text-orange"></text>更多...
							</view>
						</view>
						<!-- 弹出框结构 更多操作 -->
						<view v-if="showModal" class="overlay" @click="overlayClick">
							<view class="action-modal" @click.stop>
								<view class="action-modal-content">
									<view class="action-item" @click="handleAction('启用',item)">启用</view>
									<view class="action-item" @click="handleAction('停止预约(用户可见)',item)">停止预约(用户可见)</view>
									<view class="action-item" @click="handleAction('关闭(用户不可见)',item)">关闭(用户不可见)</view>
									<view class="action-item" @click="handleAction('删除',item)">删除</view>
									<view class="action-item" @click="showModal = false">取消</view>
								</view>
							</view>
						</view>
						<!-- 弹出框结构 状态管理 -->
						<view v-if="state" class="overlay" @click="overlayClick">
							<view class="action-modal" @click.stop>
								<view class="action-modal-content">
									<view class="action-item" @click="status('预约名单')">预约名单</view>
									<view class="action-item" @click="status('导出名单Excel文件',item)">导出名单Excel文件</view>
									<view class="action-item" @click="status('管理员核销预约码')">管理员核销预约码</view>
									<view class="action-item" @click="state = false">取消</view>
								</view>
							</view>
						</view>
						<!-- 弹出框结构 更多 -->
						<view v-if="more" class="overlay" @click="overlayClick">
							<view class="action-modal" @click.stop>
								<view class="action-modal-content">
									<view class="action-item" @click="status('预览')">预览</view>
									<!-- <view class="action-item" @click="status('置顶')">置顶</view>
                      <view class="action-item" @click="status('推荐到首页')">推荐到首页</view> -->
									<view class="action-item" @click="status('生成专属二维码')">生成专属二维码</view>
									<view class="action-item" @click="more = false">取消</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<import src="../../../tpls/public/list_load_tpl.wxml" />
				<template is="listLoadTpl" :data="dataList" />
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		adminGetHomenakingList,
		adminUpDateHomemakingState,
		adminSearchHomenaking,
		adminGethomemakingClassify
	} from '@/request/api.js'
	import {
		onLoad
	} from '@dcloudio/uni-app';
	const dataList = ref({
		total: 0,
		list: []
	});
	const isAdmin = ref(true);
	const isLoad = ref(true);
	const currentFilter = ref('全部'); // 初始化当前过滤器为空
	const more = ref(false);
	const searchQuery = ref('');
	onLoad(async (e) => {
		if (e.search != undefined) {
			currentFilter.value = '';
			searchQuery.value = e.search;
			adminSearchHomenaking({
				content: e.search
			}).then(res => {
				if (Array.isArray(res.data.data)) {
					dataList.value.total = res.data.data.length;
					dataList.value.list = res.data.data.map(item => ({
						id: item.id,
						ADMIN_STATE: item.state,
						ADMIN_NAME: item.title,
						ADMIN_SCHEDULE: item.make.length + "天可预约",
						ADMIN_LOGIN_TIME: item.uptime
					}));
				}
			})
		} else {
			uni.removeStorageSync('adminAddHomemaking');
			getdate();
		}

	});

	function bindFilterTap(event) {
		searchQuery.value = '';
		const filterType = event.target.dataset.filter;
		if (filterType != undefined) {
			console.log("被点击的过滤器:", filterType);
			adminGethomemakingClassify({
				classify: filterType
			}).then((res) => {
				if (Array.isArray(res.data.data)) {
					console.log(res);
					
					dataList.value.total = res.data.data.length;
					dataList.value.list = res.data.data.map(item => ({
						id: item.id,
						ADMIN_STATE: item.state,
						ADMIN_NAME: item.title,
						ADMIN_SCHEDULE: item.make.length + "天可预约",
						ADMIN_LOGIN_TIME: item.uptime
					}));
				}
			});
		}
		currentFilter.value = filterType; // 更新当前过滤器
	}

	function search() {
		uni.redirectTo({
			url: '/pages/admin/homemaking/search/admin_homemaking_search'
		});
	}

	function add() {
		uni.navigateTo({
			url: '/pages/admin/homemaking/add/settings'
		});
	}

	function update() {
		uni.navigateTo({
			url: '/pages/admin/homemaking/update/settings'
		});
	}

	const showModal = ref(false); // 控制弹出框显示的变量
	const state = ref(false);
	// 处理弹出框中的操作
	function handleAction(action, item) {
		// console.log(item.id)
		adminUpDateHomemakingState({
			id: item.id,
			operation: action
		}).then((res) => {
			if (res.data.code == 200) {
				showModal.value = false;
				getdate();
			}
		});
		// 不关闭弹出框，除非用户点击“取消”
	}

	function status(action, item) {
		// console.log(item.id)
		// console.log(item.ADMIN_NAME)
		console.log('Action:', action);
		if (action == "导出名单Excel文件") {
			uni.navigateTo({
				url: `/pages/admin/homemaking/rercord/educe?id=${item.id}&sname=${item.ADMIN_NAME}`
			});
		}
		if (action == "预约名单") {
			uni.navigateTo({
				url: '/pages/admin/homemaking/rercord/record'
			});
		}
		if (action == "预览") {
			uni.navigateTo({
				url: '/pages/admin/homemaking/details/details'
			});
		}
	}

	// 点击覆盖层时的处理函数
	function overlayClick() {
		// 不进行任何操作，以阻止点击事件冒泡到覆盖层
	}

	function getdate() {
		adminGetHomenakingList().then((res) => {
			console.log(res)
			if (Array.isArray(res.data.data)) {
				dataList.value.total = res.data.data.length;
				dataList.value.list = res.data.data.map(item => ({
					id: item.id,
					ADMIN_STATE: item.state,
					ADMIN_NAME: item.title,
					ADMIN_SCHEDULE: item.make.length + "天可预约",
					ADMIN_LOGIN_TIME: item.uptime
				}));
			}
		});
	}
</script>
<style scoped>
	.main-admin {
		/* width: 100%; */
		padding: 30rpx 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		box-sizing: border-box;
		margin-bottom: 100rpx;
		background-color: #cecece33;
	}

	.admin-comm-list {
		position: relative;
		width: 100%;
		/* padding: 0rpx 20rpx 0rpx; */
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
	}

	.load.text-grey {
		color: #999 !important;
	}

	.admin-comm-list .item {
		/* width: 100%; */
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		background-color: #fff;
		border-radius: 5rpx;
		overflow: hidden;
		margin-bottom: 30rpx;
		position: relative;
		border: 1rpx solid #ccc;
	}

	.admin-comm-list .item .no {
		position: absolute;
		bottom: 0;
		right: 10rpx;
		z-index: 99999;
		font-size: 38rpx;
		font-weight: bold;
		color: #ccc;
		opacity: .5;
		z-index: 100;
	}

	.admin-comm-list .item:last-child {
		margin-bottom: 0;
	}

	.admin-comm-list .item .header {
		/* width: 100%; */
		font-size: 28rpx;
		text-align: left;
		line-height: 2.6;
		padding: 0 15rpx;
		display: flex;
		background-color: #f2f2f2;
		justify-content: space-between;
		align-items: center;
	}

	.admin-comm-list .item .header .left {
		flex: 1;
		font-size: 29rpx;
		text-align: left;
		line-height: 2.6;
		padding: 0 5rpx;
		text-align: left;
		font-weight: bold;
	}

	.admin-comm-list .item .header .right {
		min-width: 100rpx;
		text-align: right;
	}

	.admin-comm-list .item .info {
		width: 100%;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		background-color: #fff;
		min-height: 150rpx;
		padding: 15rpx 20rpx 30rpx;
		position: relative;
	}

	.admin-comm-list .item .info .info-item {
		width: 100%;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		background-color: #fff;
		line-height: 1.5;
		font-size: 26rpx;
		margin-bottom: 16rpx;
	}

	.admin-comm-list .item .info .info-item .title {
		width: 110rpx;
		color: #333;
		text-align: right;
		font-weight: bold;
	}

	.admin-comm-list .item .info .info-item .mao {
		color: #333;
		text-align: left;
		margin-right: 10rpx;
	}

	.admin-comm-list .item .info .info-item .content {
		flex: 1;
		/* color: #555; */
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		display: flex;
		flex-wrap: wrap;
	}

	.title {
		font-weight: bold;
		/* 字体加粗 */
	}

	.content.text-bold.text-red {
		font-weight: bold;
		/* 字体加粗 */
	}

	.oprt {
		display: flex;
		/* justify-content: center;
 margin-top: 20px; */
	}

	.btn {
		display: flex;
		align-items: center;
		padding: 5px 18px;
		border-radius: 4px;
		background-color: #f0f0f0;
		color: #333;
		margin-right: 10px;
		cursor: pointer;
		transition: background-color 0.3s;
		font-size: 11px;
	}

	.btn:hover {
		background-color: #e0e0e0;
	}

	.icon-edit,
	.icon-roundclose,
	.icon-delete {
		margin-right: 6px;
	}

	.text-orange {
		color: #f56c6c;
	}

	.text-red {
		color: red;
	}

	/* 特定操作按钮的样式 */
	.btn-edit {
		color: #409eff;
	}

	.btn-status {
		color: #67c23a;
	}

	.btn-delete {
		color: #f56c6c;
	}

	/* 当鼠标悬停在按钮上时的样式 */
	.btn-edit:hover {
		background-color: #409eff;
		color: #fff;
	}

	.btn-status:hover {
		background-color: #67c23a;
		color: #fff;
	}

	.btn-delete:hover {
		background-color: #f56c6c;
		color: #fff;
	}

	.load.text-grey {
		font-size: 14px;
		/* 设置字体大小 */
		color: #909399;
		/* 设置字体颜色为浅灰色 */
		text-align: center;
		/* 文本居中 */
		margin-bottom: 15px;
		/* 与下方元素的间距 */
		line-height: 1.5;
		/* 行高，增加阅读体验 */
	}


	.search-container {
		/* display: flex; */
		justify-content: space-between;
		align-items: center;
		margin-top: 7px;
		/* 距离顶部5px */
		padding-left: 10px;
		/* 距离左边10px */
		max-height: 77px;
	}

	.search-box {
		flex-grow: 1;
		display: flex;
		align-items: center;
		border: 1px solid #dcdfe6;
		/* 边框颜色 */
		border-radius: 4px;
		/* 圆角 */
		padding: 0px 15px;
		/* 内边距调整为更紧凑 */
		background-color: #fff;
		/* 背景色 */
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		/* 轻微阴影 */
		max-width: 202px;
		/* 设置搜索框的最大宽度 */
	}

	.search-box input {
		flex-grow: 1;
		border: none;
		padding: 6px 0;
		font-size: 14px;
		/* 字体大小 */
		color: #606266;
		/* 字体颜色 */
	}

	.search-box button {
		padding: 0 10px;
		background-color: #2196F3;
		/* 按钮背景色 */
		color: #fff;
		/* 字体颜色 */
		border: none;
		border-radius: 4px;
		/* 圆角 */
		cursor: pointer;
		font-size: 14px;
		/* 字体大小 */
		outline: none;
		/* 移除焦点轮廓 */
	}

	.search-box button:hover {
		background-color: #1e88e5;
		/* 鼠标悬停时的背景色 */
	}

	.add-btn {
		padding: 6px 10px;
		background-color: #2196F3;
		/* 按钮背景色 */
		color: #fff;
		/* 字体颜色 */
		border: none;
		border-radius: 4px;
		/* 圆角 */
		cursor: pointer;
		font-size: 14px;
		/* 字体大小 */
		outline: none;
		/* 移除焦点轮廓 */
		max-width: 86px;
		position: relative;
		top: -35px;
		left: 246px;
	}

	.add-btn:hover {
		background-color: #1e88e5;
		/* 鼠标悬停时的背景色 */
	}


	/* 分类 */
	.filter-container {
		display: flex;
		/* justify-content: center; 水平居中 */
		position: relative;
		top: -16px;
		/* left: -84px; */
		min-width: 500px;
	}

	.filter {
		display: flex;
		/* 水平排列 */
	}

	.filter text {
		margin: 0 6px;
		/* 每个文本之间的间距 */
		cursor: pointer;
		/* 鼠标悬停时的手势 */
		transition: color 0.3s;
		/* 颜色变化的过渡效果 */
	}

	.filter text.active {
		color: #2196F3;
		/* 被选中的文本颜色为蓝色 */
	}

	.dropdown-trigger {
		position: relative;
		display: inline-block;
		cursor: pointer;
	}

	.dropdown-menu {
		position: absolute;
		background-color: #ffffff;
		border: 1px solid #ebedf0;
		border-radius: 6px;
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
		padding: 10px 0;
		margin-top: -10px;
		margin-left: -10px;
		/* 向右移动100px */
		width: 100%;
		/* Ensure the menu is as wide as the trigger */
		z-index: 100;
	}

	.menu-item {
		padding: 12px 20px;
		font-size: 16px;
		color: #1c1c1c;
		cursor: pointer;
		transition: background-color 0.3s;
	}

	.icon-arrow {
		width: 15px;
		height: 15px;
		position: relative;
		top: 3px;
		left: -172px;
	}

	.overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 9999;
		/* 提高层级，确保覆盖其他元素 */
	}

	.action-modal {
		background-color: #fff;
		border-radius: 10px;
		width: 100%;
		/* max-width: 300px; 限制最大宽度 */
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		position: absolute;
		/* 使用绝对定位 */
		bottom: 0;
		/* 定位到屏幕底部 */
		left: 50%;
		/* 定位到屏幕左侧50% */
		transform: translateX(-50%);
		/* 水平居中 */
		z-index: 10000;
		/* 提高层级，确保弹出框在最上面 */
	}

	.action-modal-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		/* 水平居中 */
		justify-content: center;
		/* 垂直居中 */
		height: 100%;
	}

	.action-item {
		padding: 20px;
		width: 100%;
		text-align: center;
		border-bottom: 1px solid #ebebeb;
		cursor: pointer;
	}

	.action-item:last-child {
		border-bottom: none;
	}

	.right image {
		width: 20px;
		height: 20px;
		position: relative;
		top: 5px;
	}
</style>